<template>
  <div class="tip-box">
    <slot />
    <el-popover
      :placement="placement"
      :title="title"
      width="300"
      trigger="hover"
    >
      <slot name="content">{{ content }}</slot>
      <i slot="reference" class="el-icon-question fc9" />
    </el-popover>
    <!-- <el-tooltip v-bind="$attrs" :placement="placement"  effect="dark">
      <div slot="content" v-html="content" />
    <i class="el-icon-question fc9" /></el-tooltip>-->
  </div>
</template>

<script>
export default {
  props: {
    content: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    placement: {
      type: String,
      default: 'right'
    }
  }
}
</script>

<style lang="scss">
@import "~styles/variables";
.tip-box {
  display: inline-block;
  &>span{
  display: inline-block;
  vertical-align: middle;}
  .el-icon-question {
  //   font-size: 20px;
  color: $theme-primary;
  font-size: rem(24px);
  top: 7px;
  right: -34px;
  // color: $theme-default;
  cursor: pointer;
}
}
</style>
